<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.1,maximum-scale=3,user-scalable=yes" /> -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../common/mui/mui.css" rel="stylesheet" />
		<link href="../common/css/app.css" rel="stylesheet" />
		<link href="../common/css/imagePreview.css" rel="stylesheet" />
		<style type="text/css">
			body,.mui-scroll-wrapper{
				background-color: white;
			}
			.mui-scroll-wrapper{
				top: 44px;
				height: calc(100% - 44px);
			}
			.mui-scroll{
				padding: 15px;
				
			}
			.fileTip{
				width: 100%;
				margin-top: 10px;
				padding: 8px;
				border-radius: 4px;
				font-size: 15px;
				background-color: #F0F0F0;
			}
			.mui-table-view:before,.mui-table-view:after{
				height: 0;
			}
			.mui-table-view-cell:after{
				left: 0;
				right: 0;
			}
			.mui-table-view-cell:last-child:after{
				height: 1px;
			}
			.mui-table-view-cell{
				position: relative;
				font-size: 15px;
				padding: 10px 0;
			}
			.mui-table-view-cell.mui-active{
				background-color: white;
			}
			.fileImg{
				width: 30px;
				height: 30px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
			.fileImg:first-child{
				z-index: 2;
				background-color: white;
			}
			.fileImg img{
				height: 30px;
				width: 30px;
				object-fit: contain;
			}
			.fileName{
				width: calc(100% - 40px);
				margin-left: 40px;
				font-size: 14px;
			}
			.mui-bar a, header>.mui-icon-left-nav:before{
				color: var(--mainColor);
			}
		</style>
	</head>

	<body >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>
		<div class="mui-scroll-wrapper">
			<div id="scroll" class="mui-scroll"></div>
		</div>
		<script src="../common/mui/mui.js"></script>
		<script src="../common/js/jquery-3.4.1.min.js"></script>
		<script src="../common/js/globalSet.js"></script>
		<script src="../common/js/DHCWebService.js"></script>
		<script src="../common/mui/mui.zoom.js"></script>
		<script src="../common/mui/mui.previewimage.js"></script>
		<script type="text/javascript">
			var TomcatUrl = JSON.parse(localStorage.getItem('$user')).TomcatUrl;
			mui.init({
				swipeBack: false, //关闭右滑关闭功能
			});
			mui.plusReady(function() {
				baseSetup();
			})
			if (!mui.os.plus) {
				baseSetup()
			}
			function baseSetup(){
				mui('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: false, //是否显示滚动条
				});
				var self=plus.webview.currentWebview()
				$('#title')[0].innerText = self.title;
				var dict = {"id":self.fildId,'appFlag':'1'}
				var paramDict = {'method':'web.INMOrgComm:GetSysContent','params':JSON.stringify(dict),'type':'RecMethod'}
				mui.DHCWebService(paramDict, function(result) {
					//console.log(JSON.stringify(result))
					var data = result.data
					updateUI(data);
				}, function(errorStr) {
					
				});
				
			}
			function updateUI(data){
				var status = data['Status']
				var filterUrl = data['FileUrl'];
				var content = data['ContentExt']
				content = content.replace(/☼/g, "\"")
				if (filterUrl == "") {
					mui('#scroll')[0].innerHTML = content
					return
				}
				content+='<div class="fileArea">'+
					'<div class="fileTip">附件</div>'+
					'<ul class="mui-table-view">'
				var fileArr = filterUrl.split(',')
				for (var i = 0; i < fileArr.length;i++) {
					var oneUrl = fileArr[i]
					var index = oneUrl.lastIndexOf("\/");  
					var fileName=oneUrl.substring(index+1,oneUrl.length);
					index = fileName.lastIndexOf(".");
					var fileType=fileName.substring(index+1,fileName.length);
					var icon = fileTypeIcon(oneUrl);
					var iconStr = '<div class="fileImg"><img src="../dependence/teach/images/'+icon+'.svg"/></div>';
					if (icon == 'img') {
						iconStr += '<div class="fileImg"><img class="photo" src="'+
							TomcatUrl+'/'+oneUrl +'" data-preview-group="1" data-preview-src="" /></div>';
					}
					content += '<li class="mui-table-view-cell" data-url="'+oneUrl+'">'+iconStr+
						'<div class="fileName">'+fileName+'</div></li>'
				}
				content+='</ul></div>'
				mui('#scroll')[0].innerHTML = content
				mui('.fileArea .fileName').each(function (index,element) {
					element.addEventListener('tap',fileDomTapped)
				})
				mui('.fileArea li').each(function (index,element) {
					var dom = element.querySelector('.fileImg')
					dom.addEventListener('tap',fileDomTapped)
				})
				mui('.fileArea .photo').each(function (index,element) {
					element.addEventListener('error',function(){
						this.setAttribute('data-exist',"No")
					})
				})
				mui.previewImage();
			}
			function fileDomTapped(){
				var dom = this.parentNode
				var url = dom.getAttribute('data-url');
				url = TomcatUrl +'/'+url
				var fileType = fileTypeIcon(url)
				if (fileType == 'img') {
					var photo = dom.querySelector('.photo')
					if (photo.getAttribute('data-exist')!= "No") {
						mui.trigger(photo,'tap')
					}else{
						mui.toast('图片不存在')
					}
					return
				}
				var label = this.innerText
				var pageName = ''
				switch (fileType){
					case "pdf":
					case "word":
					case "ppt":
						//url='https://114.242.246.235:1443/imedical/web/scripts/nurse/nurtv/imedical+8.5升级开发需关注的相关要求.pdf'
						pageName = '../FilePreview/pdfReader.html'
						break;
					case "txt":
						pageName = 'filePreview.html'
						break;
					default:
						break;
				}
				if (pageName == '') {
					mui.toast('暂不支持此类型文件')
					return
				}
				mui.checkUrlReal(url,function(){
					var webview = plus.webview.create(pageName, pageName, {
						background: '#fff',
						statusbar: {
							background: '#fff'
						}
					},{'title':label,'fileUrl':url});
					webview.show('fade-in');
				},function(){
					mui.toast('文件不存在')
				})
				
			}
			
			function fileTypeIcon(url){
				var icon = ''
				url = url.toLowerCase()
				if (url.endsWith(".pdf")) {
					icon = 'pdf'
				}else if (url.endsWith(".png")||url.endsWith(".jpg")||url.endsWith(".jpeg")||url.endsWith(".gif")||url.endsWith(".bmp")) {
					icon = 'img'
				}else if (url.endsWith(".doc") || url.endsWith(".docx")) {
					icon = 'word'
				}else if (url.endsWith(".ppt") || url.endsWith(".pptx")) {
					icon = 'ppt'
				}else if (url.endsWith(".txt") || url.endsWith(".json")) {
					icon = 'txt'
				}else{
					icon = 'file'
				}
				return icon
			}
		</script>
	</body>

</html>
